<template>
  <transition name="unfold" v-on="on">
    <slot/>
  </transition>
</template>

<script setup>

const on = {
  beforeEnter(el) {
    // eslint-disable-next-line no-param-reassign
    el.style.maxHeight = 0;
  },

  enter(el) {
    // eslint-disable-next-line no-param-reassign
    el.style.maxHeight = `${el.scrollHeight}px`;
    // if (el.scrollHeight !== 0) {
    //   el.style.maxHeight = `${el.scrollHeight}px`;
    // } else {
    //   el.style.maxHeight = 0;
    // }
  },

  afterEnter(el) {
    // eslint-disable-next-line no-param-reassign
    el.style.maxHeight = '';
  },

  beforeLeave(el) {
    // eslint-disable-next-line no-param-reassign
    el.style.maxHeight = `${el.scrollHeight}px`;
  },

  leave(el) {
    // eslint-disable-next-line no-param-reassign
    el.style.maxHeight = 0;
    // if (el.scrollHeight !== 0) {
    // }
  },

  afterLeave(el) {
    // eslint-disable-next-line no-param-reassign
    el.style.maxHeight = '';
  }
};
</script>

<style scoped lang="scss">
//.unfold-enter-from,
//.unfold-leave-to {
//  max-height: 0;
//}
//////
//.unfold-enter-to,
//.unfold-leave-from {
//  max-height: 500px;
//}

.unfold-leave-active,
.unfold-enter-active {
  transition: .3s max-height ease-in-out;
}
</style>
